<template>
	<view class="content" @click="handlerClick(page)">
		<image :src="icon" :style="cssProps"></image>
		<text>{{name}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			page: String,
			icon: String,
			name: String,
			color: String
		},
		computed: {
			cssProps() {
				return {
					'--background-color': this.color
				}
			}
		},
		methods: {
			handlerClick(page) {
				if (page == 'guide') {
					uni.navigateTo({
						url: "../guide/guide"
					})
				} else if (page == 'order') {
					uni.navigateTo({
						url: "../order/listToOrder"
					})
				} else if (page == 'activity') {
					uni.navigateTo({
						url: "../activity/activityList"
					})
				} else if (page == 'notification') {
					uni.navigateTo({
						url: "../notification/notification"
					})
				} else if (page == 'activity') {
					uni.navigateTo({
						url: "../activity/activityList"
					})
				} else if (page == 'introduction') {
					uni.navigateTo({
						url: "../introduction/introduction"
					})
				} else if (page == 'show') {
					uni.navigateTo({
						url: "../show/showList"
					})
				} else if (page == 'volunteer') {
					uni.navigateTo({
						url: "../volunteer/volunteer"
					})
				}else if (page == 'mine') {
					if (uni.getStorageSync('userInfo')) {
						uni.navigateTo({
							url: "../mine/mine"
						})
					} else {
						uni.navigateTo({
							url: "../index/index"
						})
					}
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
	}

	.content image {
		border-radius: 100rpx;
		height: 90rpx;
		width: 90rpx;
		background: var(--background-color);
	}

	.content text {
		font-size: 24rpx;
		margin-top: 10rpx;
		color: #333;
	}
</style>
